<template>
  <div>
    <div
      class="nav-top"
      :style="{
        'background-image': 'url(' + $photo + returnData.img_id + ')'
      }"
    >
      <div>
        <img
          class="icon-back"
          src="../../../static/images/task/back_white.png"
          alt
          @click="backs()"
        />
        <img
          v-show="0"
          class="icon-share"
          src="../../../static/images/task/share.png"
          alt
        />
      </div>
    </div>
    <div class="main-task">
      <div>
        <div>
          <div class="user-play">
            <img
              :src="
                returnData.pic_id
                  ? $photo + returnData.pic_id
                  : '../../../static/images/task/user.png'
              "
              alt
            />
            <span>{{ returnData.name }}</span>
            <button>请求任务</button>
          </div>
          <p class="introduction">
            <span>#初见</span>
            {{ returnData.introduced }}
          </p>
        </div>
      </div>
      <div>
        <div class="time-info">
          <p>
            时间
            <span class="icon-label"></span>
          </p>
          <div class>
            <span>开始时间</span>
            <input type="text" :value="returnData.addtime" readonly />
          </div>
          <div>
            <span>结束时间</span>
            <input type="text" :value="returnData.exittime" readonly />
          </div>
        </div>
      </div>
      <div>
        <div class="detail-info">
          <p>
            详情
            <span class="icon-label"></span>
          </p>
          <div>
            <span>地点</span>
            <input type="text" :value="returnData.detailed_address" readonly />
          </div>
          <div>
            <span>任务发起人性别</span>
            <!-- <input type="text" v-if="returnData.sex == 1" value="男" />
            <input type="text" v-else value="女" />-->
            <input type="text" :value="returnData.sex" readonly />
          </div>
          <div>
            <span>任务接收人性别</span>
            <!-- <input type="text" v-if="returnData.demandsex == 1" value="男" />
            <input type="text" v-else-if="returnData.demandsex == 2" value="女" />
            <input type="text" v-else value="不限" />-->
            <input type="text" :value="returnData.demandsex" readonly />
          </div>
          <div>
            <span>所需人数</span>
            <input
              type="text"
              :value="returnData.demand_people + '人'"
              readonly
            />
          </div>
          <div class="other-tips">
            <p>其他需求</p>
            <textarea name disabled :value="returnData.content"></textarea>
          </div>
        </div>
      </div>
      <div class="comment-box">
        <div class="comment-info">
          <p>
            她的评价
            <span class="icon-edit"></span>
          </p>
          <div
            v-infinite-scroll="loadMore"
            infinite-scroll-disabled="busy"
            infinite-scroll-distance="0"
          >
            <div
              class="comment-item"
              v-for="evaluate in evaluates"
              :key="evaluate.id"
            >
              <div class="user-card">
                <img
                  :src="
                    evaluate.pic_id
                      ? $photo + evaluate.pic_id
                      : '../../../static/images/task/user.png'
                  "
                  alt
                />
                <div>
                  <p>{{ evaluate.name }}</p>
                  <p>{{ evaluate.create_time }}</p>
                </div>
                <div class="star-num">
                  <span class="icon-select-star"></span>
                  <span class="icon-select-star"></span>
                  <span class="icon-select-star"></span>
                  <span class="icon-star"></span>
                  <span class="icon-star"></span>
                </div>
              </div>
              <div class="comment-content">{{ evaluate.content }}</div>
            </div>
          </div>
          <div class="text" v-if="dataStart">没有更多数据了~</div>
        </div>
      </div>
    </div>
    <div class="request">
      <div @click="insertLabel()">
        <img src="../../../static/images/task/fabu.png" alt />
        <span>写评价</span>
      </div>
      <button @click="requestTask">请求任务</button>
    </div>
    <!-- 评价添加窗口 -->
    <div
      class="likeGood_insert"
      v-if="showLikeGoods"
      @click="showLikeGoods = !showLikeGoods"
    >
      <div class="likeGood_insert_kuang" @click.stop>
        <div>请输入评价</div>
        <input
          type="text"
          name="labelName"
          placeholder="请输入评价内容"
          v-model="labelNameIn"
        />
        <div @click="insertLabelqr()">确定</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 评价弹框显示
      showLikeGoods: false,
      // 获取到的评价
      evaluates: [],
      returnData: [],
      labelNameIn: '',
      page: 1,
      busy: false,
      dataStart: false,
      count: 0
    }
  },
  methods: {
    backs() {
      this.$router.push({
        path: '/homePage',
        query: {
          subs: this.$route.query.backDatac,
          selectSX: this.$route.query.backDatacT
        }
      })
    },
    insertLabel() {
      this.showLikeGoods = true
    },
    // 评价
    insertLabelqr() {
      if (this.labelNameIn == '') {
        alert('请填写评论内容')
        return false
      }

      this.$axios({
        method: 'POST',
        url: 'Needloginaction/makeEva',
        data: {
          token: sessionStorage.token,
          mid: this.$route.query.id,
          content: this.labelNameIn,
          type: 0
        }
      })
        .then(res => {
          if (res.data.code == 200) {
            alert(res.data.msg)
          } else {
            alert(res.data.msg)
          }
        })
        .catch(error => {
          alert('网络错误，请刷新后重试~')
        })
      this.showLikeGoods = false
    },
    requestTask() {
      // console.log(this.returnData.uid, this.$route.query.id, sessionStorage.token)
      this.$axios({
        method: 'POST',
        url: 'Needloginaction/RequestAdd',
        data: {
          token: sessionStorage.token,
          personal_id: this.returnData.uid,
          id: this.$route.query.id
        }
      })
        .then(res => {
          if (res.data.code == 200) {
            this.$jump('/taskRequest')
          } else {
            alert(res.data.msg)
          }
        })
        .catch(error => {
          alert('网络错误，请刷新后重试~')
        })
    },
    loadMore() {
      this.busy = true
      if (this.page == 1) {
        this.comment()
      } else if (this.evaluates.length != this.count) {
        if (this.evaluates == []) {
          return false
        }
        this.comment()
      } else {
        this.dataStart = true
        return false
      }
    },
    comment() {
      this.$axios({
        method: 'POST',
        url: 'Flink/information_comment',
        data: {
          id: this.$route.query.id,
          type: 0,
          page: this.page
        }
      })
        .then(res => {
          if (res.data.code == 200) {
            if (res.data.data.length == 0) {
              this.dataStart = true
              return false
            } else {
              this.count = res.data.count
              if (this.page == 1) {
                this.evaluates = res.data.data
              } else {
                res.data.data.forEach(item => {
                  this.evaluates.push(item)
                })
              }
              this.page++
            }
          } else {
            alert(res.data.msg)
            //back()
          }
        })
        .catch(error => {
          alert('网络错误，请刷新后重试~')
        })
      this.busy = false
    }
  },
  created() {
    this.$axios({
      method: 'POST',
      url: 'Flink/taskDetails',
      data: {
        id: this.$route.query.id
      }
    })
      .then(res => {
        if (res.data.code == 200) {
          this.returnData = res['data']['data']
        } else {
          alert(res.data.msg)
        }
      })
      .catch(error => {
        alert('网络错误，请刷新后重试~')
      })
  }
}
</script>

<style scoped lang="scss">
.text {
  font-size: 16px;
  text-align: center;
  height: 50px;
  line-height: 50px;
}
// 爱好标签添加窗口
.likeGood_insert {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  width: 10rem;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  // border:1px solid red;
  & > .likeGood_insert_kuang {
    width: 7.826667rem;
    height: 4.986667rem;
    background-color: #ffffff;
    border-radius: 0.2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    & > div:nth-child(1) {
      width: 6.626667rem;
      height: 1rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 0.4444rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0rem;
      color: #303030;
    }
    & > input {
      width: 6.026667rem;
      height: 1rem;
      background-color: #e0e0e0;
      border-radius: 0.066667rem;
    }
    & > div:nth-child(3) {
      width: 6.626667rem;
      height: 1rem;
      background-color: #323232;
      border-radius: 0.5rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 0.4444rem;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0rem;
      color: #ffffff;
    }
  }
}
.nav-top {
  width: 100%;
  height: 8.667rem;
  padding: 0.667rem 0.267rem;
  box-sizing: border-box;
  background: url('../../../static/images/task/task-top.png') no-repeat;
  background-size: 100% 100%;
}
.nav-top > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.icon-back {
  width: 0.33rem;
  height: 0.56rem;
}
.icon-share {
  width: 0.533rem;
  height: 0.533rem;
}
.main-task {
  margin: 0.2rem auto;
}
.main-task > div {
  border-bottom: 4px solid #efefef;
}
.main-task > div > div {
  width: 90%;
  margin: 0.2rem auto;
}
.user-play {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.44rem;
  color: #303030;
}
.user-play img {
  width: 1.2rem;
  height: 1.2rem;
}
.user-play > button {
  width: 2.133rem;
  height: 0.533rem;
  margin-left: 3rem;
  color: #fff;
  font-size: 0.36rem;
  border-radius: 0.267rem;
  border: #323232;
  background-color: #323232;
}
.introduction {
  margin: 0.55rem 0;
  font-size: 0.4rem;
  color: #303030;
}
.introduction > span {
  color: #323232;
  padding-right: 0.3rem;
}
.time-info > p {
  padding: 0.533rem 0 0.267rem 0;
  font-size: 0.44rem;
  color: #323232;
  border-bottom: 1px solid #efefef;
}
.time-info > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.267rem 0 0.4rem 0;
  font-size: 0.4rem;
}
.time-info > div:nth-child(2) {
  border-bottom: 1px solid #efefef;
}
.time-info > div input {
  text-align: right;
  border: none;
  background: none;
  color: #888;
}
.detail-info > p {
  padding: 0.267rem 0;
  font-size: 0.44rem;
  color: #323232;
}
.detail-info > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0;
  font-size: 0.4rem;
  color: #303030;
  border-bottom: 1px solid #efefef;
}
.detail-info > div > input {
  text-align: right;
  color: #888;
  background: none;
  border: none;
}
.other-tips {
  flex-direction: column;
  align-items: normal !important;
  text-align: left;
  border-bottom: 0 !important;
}
.other-tips > textarea {
  width: 100%;
  height: 2.667rem;
  padding: 0.3rem;
  margin: 0.133rem 0;
  border: #e0e0e0;
  border-radius: 0.133rem;
  box-sizing: border-box;
  background-color: #e0e0e0;
}
.comment-box {
  border-bottom: 0 !important;
  padding-bottom: 2rem;
  box-sizing: border-box;
}
.comment-info {
  font-size: 0.427rem;
}
.comment-info > p {
  padding: 0.267rem 0;
  font-size: 0.44rem;
  color: #323232;
}
.user-card {
  display: flex;
  margin: 0.267rem 0;
}
.user-card > img {
  width: 1.2rem;
  height: 1.2rem;
  padding-right: 0.267rem;
}
.user-card > div > p:nth-child(2) {
  font-size: 0.333rem;
  color: #888;
}
.star-num {
  margin-left: 3rem;
}
.comment-content {
  margin: 0.267rem 0;
}
.request {
  display: flex;
  justify-content: space-around;
  align-items: center;
  // padding: 0.267rem 0;
  box-shadow: 0px -1px 10px #e0e0e0;
  width: 10rem;
  height: 1.53rem;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 5;
  background-color: #fff;
}
.request > div {
  font-size: 0.427rem;
  color: #303030;
}
.request > div > img {
  margin-right: 0.16rem;
  width: 0.38rem;
  height: 0.38rem;
}
.request > button {
  width: 4.467rem;
  height: 0.8rem;
  color: #fff;
  font-size: 0.427rem;
  border-radius: 0.4rem;
  border: #323232;
  background-color: #323232;
}
.icon-star {
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  background: url('../../../static/images/task/star.png') no-repeat;
  background-size: 100% 100%;
}
.icon-select-star {
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  background: url('../../../static/images/task/star_selecct.png') no-repeat;
  background-size: 100% 100%;
}
.icon-label {
  display: inline-block;
  width: 0.36rem;
  height: 0.36rem;
  margin-left: 0.133rem;
  background: url('../../../static/images/task/tag.png') no-repeat;
  background-size: 100% 100%;
}
.icon-edit {
  display: inline-block;
  width: 0.32rem;
  height: 0.293rem;
  margin-left: 0.133rem;
  background: url('../../../static/images/task/fabu.png') no-repeat;
  background-size: 100% 100%;
}
</style>
